<template>
	<div class="member">
		<list-title :data="header"></list-title>
		<el-form :model="memberForm" :rules="rules" ref="memberForm" label-width="200px">
			<el-form-item label="会员账户" prop="data.username" style="width: 520px;">
				<el-input v-model="memberForm.data.username" placeholder="会员账户" v-if="!$route.query.id"></el-input>
				<div class="disabled" v-if="$route.query.id">{{ memberForm.data.username }}</div>
			</el-form-item>
			<div v-if="!$route.query.id">
				<el-form-item label="密码" prop="data.password" style="width: 520px;" required>
					<el-input type="password" v-model="memberForm.data.password" placeholder="管理员密码"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="data.passwordConfirm" style="width: 520px;" required>
					<el-input type="password" v-model="memberForm.data.passwordConfirm" placeholder="确认密码"></el-input>
				</el-form-item>
			</div>
			<el-form-item label="手机" prop="data.phone" style="width: 520px;">
				<el-input v-model="memberForm.data.phone" placeholder="手机"></el-input>
			</el-form-item>
			<el-form-item label="区域" style="width: 900px;">
				<el-col :span="5">
					<el-form-item prop="data.province" style="margin-bottom: 0px">
						<el-select v-model="checkProvince" placeholder="请选择省" @change="getCityByProvince('')">
							<el-option v-for="(item, index) in provinceList" :key="index" :label="item.areaname" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col class="line" :span="1">-</el-col>
				<el-col :span="5">
					<el-form-item prop="data.city" style="margin-bottom: 0px">
						<el-select v-model="checkCity" placeholder="请选择市" @change="getDistrictByCity('')">
							<el-option v-for="(item, index) in cityList" :key="index" :label="item.areaname" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col class="line" :span="1">-</el-col>
				<el-col :span="12">
					<el-form-item prop="data.district" style="margin-bottom: 0px">
						<el-select v-model="checkDistrict" placeholder="请选择区">
							<el-option v-for="(item, index) in districtList" :key="index" :label="item.areaname" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-form-item>
			<el-form-item label="状态" prop="data.state">
				<el-radio-group v-model="memberForm.data.state">
					<el-radio :label="1">锁定</el-radio>
					<el-radio :label="2">启用</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('memberForm')" :disabled='memberForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='memberForm.submitLock'></span>
				</el-button>
				<el-button @click="resetForm('memberForm')" v-if='memberForm.data.id==0'>重 置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.memberForm.data.password !== '') {
					this.$refs.memberForm.validateField('password');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.memberForm.data.password) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			comid: '',
			/*头部数据*/
			header: {
				title: '添加会员',
				reload: false,
				buttons: [
					{
						title: '会员列表',
						type: 'primary',
						pathName: 'pc/company/company/manage/member/MemberList',
					}
				]
			},
			provinceList: [],//省份
			cityList: [],//城市
			districtList: [],//区
			memberForm: {
				submitLock: false,
				data: {
					memberid: '',
					username: '',
					password: '',
					passwordConfirm: '',
					comid: '',
					phone: '',
					province: '',
					city: '',
					district: '',
					state: 2,
				}
			},
			rules: {
				data: {
					username: [
						{ required: true, message: '请输入会员账户', trigger: 'blur' },
						{ min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
					],
					password: [
						{ validator: validatePass, trigger: 'blur' }
					],
					passwordConfirm: [
						{ validator: validatePass2, trigger: 'blur' }
					],
					phone: [
						{ min: 11, max: 11, message: '长度未 11 个字符', trigger: 'blur' }
					],
				}
			}
		};
	},
	components: {
		ListTitle,
	},
	created: function() {
		/*取出comid，如果没有则跳转到 企业列表 */
		this.comid = this.$sessionStorage.get('comid')
		if(this.comid == null){
			this.$router.push({ name: "pc/company/company/CompanyList"})
		}
		/*获取所有省份数据*/
		this.getProvinceList()
		/*如果是修改，取出旧数据*/
		if(this.$route.query.id){
			this.getMember(this.$route.query.id)
		}
	},
	methods: {
		/*获取所有省份数据*/
		getProvinceList: function(){
			this.$get(this.$api.provinceList).then(res => {
				// console.log(res);
				if(res.data.code === 0){
					if(res.data.data != undefined){
						this.provinceList = res.data.data
					}
				}
			})
			.catch(err => {})
			.finally(() => {})
		},
		/*根据省份ID获取城市数据*/
		getCityByProvince: function(val){
			if(val == ''){
				this.memberForm.data.city = ''//清空已经选择的城市数据
			}else{
				this.memberForm.data.city = val//修改数据的时候，有默认的数据
			}
			this.cityList = []//清空所有的城市，因为需要更新数据
			this.memberForm.data.district = ''//清空已经选择的区数据
			this.districtList = []//清空所有的区，因为需要更新数据
			if(this.memberForm.data.province != ''){
				this.$get(this.$api.cityList, {
					'id': this.memberForm.data.province
				}).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.cityList = res.data.data
						}
					}
				})
				.catch(err => {})
				.finally(() => {})
			}
		},
		/*根据城市ID获取区数据*/
		getDistrictByCity: function(val){
			if(val == ''){
				this.memberForm.data.district = ''//清空已经选择的区数据
			}else{
				this.memberForm.data.district = val//修改数据的时候，有默认的数据
			}
			this.districtList = []//清空所有的区，因为需要更新数据
			if(this.memberForm.data.city != ''){
				this.$get(this.$api.districtList, {
					'id': this.memberForm.data.city
				}).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.districtList = res.data.data
						}
					}
				})
				.catch(err => {})
				.finally(() => {})
			}
		},
		/*取出需要修改的数据*/
		getMember: function() {
			this.header.title = '编辑会员'
			/*取出需要修改的数据*/
			this.memberForm.submitLock = true;
			this.$get(this.$api.modifyMember, {
				'id': this.$route.query.id
			}).then(res => {
				if(res.data.code == 10007){//后台提示需要登录
					this.$cookie.remove('isLogin');//刪除cookie登录信息
					this.reload();
				}
				if(res.data.code == 0){
					// console.log(res.data.data)
					this.memberForm.data.id = res.data.data.memberid
					this.memberForm.data.username = res.data.data.username
					this.memberForm.data.phone = res.data.data.phone
					this.memberForm.data.province = res.data.data.province
					this.memberForm.data.city = res.data.data.city
					this.memberForm.data.district = res.data.data.district
					this.memberForm.data.state = parseInt(res.data.data.state)
					/*如果已经选择了省，则需要取出市数据*/
					if(res.data.data.province != ''){
						this.getCityByProvince(res.data.data.city)
					}
					if(res.data.data.city != ''){
						this.getDistrictByCity(res.data.data.district)
					}
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
				this.memberForm.submitLock = false;
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			this.memberForm.data.comid = this.comid
			if(!this.memberForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.memberForm.submitLock = true;
						/*添加、修改分类*/
						let apiUrl = this.$api.addMember//默认是添加
						if(this.memberForm.data.id != ''){//修改
							apiUrl = this.$api.modifyMember
						}
						/*添加*/
						this.$post(apiUrl, {
							Member: this.memberForm.data
						}).then(res => {
							// console.log(res);
							/*成功*/
							if(res.data.code == 0){
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'success'
								});
								if(this.memberForm.data.id != ''){
									this.$router.go(-1)	
								}else{
									this.$refs[formName].resetFields();
								}
							}else{
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'error'
								});
							}
							this.memberForm.submitLock = false;
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		/*重置表单*/
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	},
	computed: {
		/*验证省份是否已经获取到，有了数据才展示,防止直接出现数字，比较尴尬*/
		checkProvince: {
			get: function () {
				if(this.provinceList.length > 0){
					return this.memberForm.data.province
				}else{
					return ''
				}
			},
			set: function (val) {
				this.memberForm.data.province = val
			}
		},
		/*验证城市是否已经获取到，有了数据才展示,防止直接出现数字，比较尴尬*/
		checkCity: {
			get: function () {
				if(this.cityList.length > 0){
					return this.memberForm.data.city
				}else{
					return ''
				}
			},
			set: function (val) {
				this.memberForm.data.city = val
			}
		}
		,
		/*验证区是否已经获取到，有了数据才展示,防止直接出现数字，比较尴尬*/
		checkDistrict: {
			get: function () {
				if(this.districtList.length > 0){
					return this.memberForm.data.district
				}else{
					return ''
				}
			},
			set: function (val) {
				this.memberForm.data.district = val
			}
		}
	}
};
</script>

<style lang="stylus" scoped>
.member
	form
		margin-top: 10px
		.line
			text-align: center
</style>